    var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');  
      
    $('scroll_down_50').observe('click',function(event){  
        scrollbar.scrollBy(-50);  
        event.stop();  
    });  
      
    $('scroll_up_50').observe('click',function(event){  
        scrollbar.scrollBy(50);  
        event.stop();  
    });  
      
    $('scroll_top').observe('click',function(event){  
        scrollbar.scrollTo('top');  
        event.stop();  
    });  
      
    $('scroll_bottom').observe('click',function(event){  
        //to animate a scroll operation you can pass true  
        //or a callback that will be called when scrolling is complete  
        scrollbar.scrollTo('bottom',function(){  
            if(typeof(console) != "undefined")  
                console.log('Finished scrolling to bottom.');  
        });  
        event.stop();  
    });  
      
    $('scroll_second').observe('click',function(event){  
        //you can pass a number or element to scroll to  
        //if you pass an element, it will be centered, unless it is  
        //near the bottom of the container  
        scrollbar.scrollTo($('second_subhead'));  
        event.stop();  
    });  
      
    $('scroll_third').observe('click',function(event){  
        //passing true will animate the scroll  
        scrollbar.scrollTo($('third_subhead'),true);  
        event.stop();  
    });  
      
    $('scroll_insert').observe('click',function(event){  
        $('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>');  
        //you only need to call this if ajax or dom operations modify the layout  
        //this is automatically called when the window resizes  
        scrollbar.recalculateLayout();  
        event.stop();  
    });  
